<template>
	<view>
		<my-navbar leftText="会员开卡" leftIcon="arrow-left" :custom="false" bgColor="#ffffff" :autoBack="true"
			leftIconSize="40" />
		<!-- 卡片轮播区域 -->
		<view>
			<view class="uni-margin-wrap">
				<swiper class="swiper" :next-margin="next+'rpx'" :previous-margin="previous+'rpx'"
					:indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
					@change="change">
					<swiper-item v-for="(item,index) in list" :key="index">
						<view class="swiper-item">
							<view style="color: aliceblue;position: absolute;top: 40rpx;left: 30rpx;">
								<p>{{item.cardTitle}}</p>
							</view>
							<view style="color: aliceblue;position: absolute;bottom: 40rpx;left: 30rpx;">
								<p>￥{{item.price}}/{{item.frequency}}天</p>
							</view>
							<view
								style="color: aliceblue;position: absolute;bottom: 40rpx;right: 30rpx;font-size: 24rpx;">
								<p>购买后{{item.term}}天内有效</p>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 卡券内容区域 -->
		<view style="margin-top: 20rpx;background-color: #ffffff">
			<view style="border-bottom: 2rpx solid #e5e5e5;">
				<view style="margin: auto 80rpx;">
					<u-tabs :list="tabs" @click="tabsClick" lineWidth="140rpx" lineHeight="4rpx"
						:activeStyle="activeStyle" :scrollable="false"></u-tabs>
				</view>
			</view>
			<view>
				<view class="card-comm">
					<view style="display: flex;justify-content: space-between;align-items: baseline;">
						<view>
							<u-icon name="/other_pages/static/package/card.png" size="100"></u-icon>
							<u--text :bold="true" size="28" color="#35a5ed" :text="card.frequency+'天'" align="center" />
						</view>
						<view style="display: flex;flex-direction: column;">
							<u-icon name="/other_pages/static/package/seat.png" size="100"></u-icon>
							<my-seat-area :areaNum="card.usable"></my-seat-area>
						</view>
					</view>
				</view>
			</view>
			<view class="card-text">
				<u--text :bold="false" size="30" color="#303133" :text="card.cardTitle" align="left" />
				<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;">
					<view style="display: flex;justify-content: flex-start; align-items: center;">
						<u-icon name="/other_pages/static/package/card.png" size="60"></u-icon>
						<view style="margin-left: 30rpx;margin-top: 10rpx;">
							<u--text :bold="false" size="22" color="#868686" :text="'购买后'+card.term+'天内有效'"
								align="center" />
						</view>
					</view>
					<view>
						<u--text :bold="false" size="30" color="#303133" text="1张" align="left" />
					</view>
				</view>
			</view>
			<view style="height: 20rpx;"></view>
		</view>
		<!-- 底部按钮区域 -->
		<view class="card-button">
			<u-button text="确定支付" size="large" type="primary" @click="pay"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		cardList,
		payCard
	} from '@/config/api.js'
	export default {
		data() {
			return {
				// card: { 参数说明
				// 	title: '', 优惠卡标题
				// 	money: 0, 金额
				// 	frequency: 0, 次数
				// 	term: 0, 有效期
				// 	area: 0 区域 0为舒适区 1为经济区
				//  areaTitle:'舒适区' 区域名字
				// }
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				next: 80,
				previous: -20,
				list: [],
				tabs: [{
					name: '卡券内容'
				}],
				activeStyle: {
					color: '#35a5ed',
					fontWeight: 'bold'
				},
				card: {
					title: '',
					money: 0,
					frequency: 0,
					term: 0,
					area: 0,
					areaTitle: ''
				}
			}
		},
		methods: {
			change(e) {
				var current = e.detail.current
				const that = this
				this.card = this.list[current]
				console.log(current)
				if (current == 0) {
					setTimeout(function() {
						that.next = 80
						that.previous = -20
					}, 500);

				} else if (current == this.list.length - 1) {
					this.next = 58
					this.previous = 40
				}
			},
			tabsClick(index) {
				console.log(index)
			},
			async pay() {
				console.info(this.card)
				const params = {
					amountTotal: 0.01, //测试模式金额都为0.01
					cardId: this.card.id,
					description: this.card.cardTitle
				}
				const isLogin = uni.getStorageSync('isLogin')
				console.log(isLogin)
				if (isLogin == true) {
					const {
						data: res
					} = await payCard(params, {
						custom: {
							auth: true
						}
					})
					uni.showLoading({
						title: '正在支付'
					})
					wx.requestPayment({
						timeStamp: res.timeStamp,
						nonceStr: res.nonceStr,
						package: res.packageValue,
						signType: res.signType,
						paySign: res.paySign,
						success(res) {
							uni.showToast({
								icon: 'success',
							})
						},
						fail() {
							uni.showToast({
								icon: 'error'
							})
						}
					})
				} else {
					uni.$u.toast('请先登录')
				}
			},
			async getCardList() {
				const {
					data: res
				} = await cardList()
				console.log('获取优惠卡列表', res)
				this.list = res
				if (res.length > 0) {
					this.card = res[0]
				}
			}
		},
		onLoad() {
			this.getCardList()
			console.log(this.card)
		}
	}
</script>

<style lang="scss">
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		margin: 40rpx auto;
		margin-left: 40rpx;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		position: relative;
		height: 300rpx;
		background-image: url('');
		background-size: cover;
		border-radius: 15rpx;
		margin-left: 20rpx;
	}

	.card-comm {
		align-items: center;
		border-radius: 20rpx;
		border: 3rpx solid #35a5ed;
		margin: 40rpx;
		padding: 30rpx 80rpx;
		background-color: #35a5ed20;
	}

	.card-text {
		margin: auto 40rpx;
		padding: 30rpx 30rpx;
		background-color: $u-bg-color;
	}

	.card-button {
		margin: 40rpx;
	}
</style>
